<template>
	<view class="container">
		<view class="headerNav">
			<u-navbar title="职位管理" placeholder :border-bottom="false"></u-navbar>
		</view>
		<view class="bigNav">
			<z-tabs ref="tabs1" active-color="#00D075" :list="data.list" :current="data.current" @change="tabsChange" />
			<swiper :style="'height:'+ data.height+';padding:30rpx;'" :current="data.swiperCurrent"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging" v-model="dataList" @query="getSystemInfoSync">
						<view class="one">
							<view class="newsList" v-for="(item, index) in dataList" :key="item.id">
								<view class="jobtop">
									<view class="topjob">
										<text>{{item.jobname}}</text>
										<text>{{item.job_status_cn}}</text>
									</view>
									<view class="bottomjob">
										<text>{{item.district}}</text>
										<text>|</text>
										<text>{{item.education_text}}</text>
										<text>|</text>
										<text>{{item.experience_text}}</text>
										<text>|</text>
										<text>{{item.wage_text}}</text>
									</view>
									<view class="newspage" v-if="item.emergency==1 || item.auto_refresh==1">
										<view v-if="item.emergency==1" class="button" >
											<text>已急聘</text>
										</view>
										<view v-if="item.auto_refresh==1" class="button button2" >
											<text>智能刷新</text>
										</view>
									</view>
								</view>
								<view class="jobBottom">
									<view class="button" @tap="toretun(item.id)">
										<text>刷新</text>
									</view>
									<view class="button"  @tap="toeidt(item.id)">
										<text>修改</text>
									</view>
									<view class="button" @tap="toclose(item.id)">
										<text>关闭</text>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging2" v-model="dataList2" @query="getSystemInfoSync2">
						<view class="one">
							<view class="newsList" v-for="(item, index) in dataList2" :key="item.id">
								<view class="jobtop">
									<view class="topjob">
										<text>{{item.jobname}}</text>
										<text>{{item.job_status_cn}}</text>
									</view>
									<view class="bottomjob">
										<text>{{item.district}}</text>
										<text>|</text>
										<text>{{item.education_text}}</text>
										<text>|</text>
										<text>{{item.experience_text}}</text>
										<text>|</text>
										<text>{{item.wage_text}}</text>
									</view>
									<view class="newspage" v-if="item.emergency==1 || item.auto_refresh==1">
										<view v-if="item.emergency==1" class="button" >
											<text>已急聘</text>
										</view>
										<view v-if="item.auto_refresh==1" class="button button2" >
											<text>智能刷新</text>
										</view>
									</view>
								</view>
								<view class="jobBottom">
									<view class="button" @tap="toeidt(item.id)">
										<text>修改</text>
									</view>
									<view class="button" @tap="toclose(item.id)">
										<text>关闭</text>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging3" v-model="dataList3" @query="getSystemInfoSync3">
						<view class="one">
							<view class="newsList" v-for="(item, index) in dataList3" :key="item.id">
								<view class="jobtop">
									<view class="topjob">
										<text>{{item.jobname}}</text>
										<text>{{item.job_status_cn}}</text>
									</view>
									<view class="bottomjob">
										<text>{{item.district}}</text>
										<text>|</text>
										<text>{{item.education_text}}</text>
										<text>|</text>
										<text>{{item.experience_text}}</text>
										<text>|</text>
										<text>{{item.wage_text}}</text>
									</view>
									<view class="newspage" v-if="item.emergency==1 || item.auto_refresh==1">
										<view v-if="item.emergency==1" class="button" >
											<text>已急聘</text>
										</view>
										<view v-if="item.auto_refresh==1" class="button button2" >
											<text>智能刷新</text>
										</view>
									</view>
								</view>
								<view class="jobBottom">
									<view class="button" @tap="toclose(item.id)">
										<text>开启</text>
									</view>
									<view class="button" @tap="todele(item.id)">
										<text>删除</text>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>
		</view>
		<!-- 第一次刷新提示 -->
		<u-modal @confirm="refreshJob" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.resShow">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;padding: 20rpx;">
				<text>{{data.statusText}}</text>
			</view>
		</u-modal>
		<!-- 刷新次数用完提示 -->
		<u-modal @confirm="getCashier" title="刷新职位" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.resShow2" confirm-text="确定">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;padding: 20rpx;">
				<text>今日免费刷新职位次数已用完，本次刷新需要支付5元。</text>
			</view>
		</u-modal>
		<!-- 关闭职位弹框 -->
		<u-modal @confirm="closeJob" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.closeShow">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;padding: 20rpx;">
				<text>{{data.closeText}}</text>
			</view>
		</u-modal>

		<u-modal @confirm="deleJob" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.deleShow">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;padding: 20rpx;">
				<text>确定删除该职位吗？</text>
			</view>
		</u-modal>
		<!-- 收银台 -->
		<u-cashier :modelValue="data.isCashier" :payItem="data.itemdata" @confirm="paySubmit"
			@close="data.isCashier = false"></u-cashier>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const tabs1 = ref();
	let dataList = ref([])
	let dataList2 = ref([])
	let dataList3 = ref([])
	const paging = ref(null)
	const paging2 = ref(null)
	const paging3 = ref(null)
	const data = reactive({
		height: "",
		list: [{
				name: '发布中'

			}, {
				name: '审核中'
			},
			{
				name: '已下线'
			}
		],
		// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
		current: 0, // tabs组件的current值，表示当前活动的tab选项
		swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		type: 0,
		resShow: false,
		resShow2: false,
		statusText: "确定刷新该职位吗？",
		id: null,
		done: null,
		isCashier: false,
		itemdata: {},
		index: null,
		closeShow: false,
		closeText: "确定关闭该职位吗？",
		deleShow: false
	})
	const getCashier = () => {
		data.isCashier = true
	}
	// tabs通知swiper切换
	const tabsChange = (index) => {
		data.swiperCurrent = index;
		// if (index == 0) {
		// 	paging.value.reload()
		// } else if (index == 1) {
		// 	paging2.value.reload()
		// } else {
		// 	paging3.value.reload()
		// }

	}

	const animationfinish = (e) => {
		let current = e.detail.current;
		tabs1.value.unlockDx(current);
		data.swiperCurrent = current;
		data.current = current;
	}

	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		tabs1.value.setDx(e.detail.dx);
	}

	const getSystemInfoSync = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			type: 0
		}
		let res = await uni.$u.api.job_list({
			params
		})

		if (res) {
			paging.value.complete(res.items)
		}
	}
	const getSystemInfoSync2 = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			type: 1
		}
		let res = await uni.$u.api.job_list({
			params
		})

		if (res) {
			paging2.value.complete(res.items)
		}

	}
	const getSystemInfoSync3 = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			type: 2
		}
		let res = await uni.$u.api.job_list({
			params
		})

		if (res) {
			paging3.value.complete(res.items)
		}

	}
	//发布中
	const toretun = (id) => {
		data.id = id
		data.itemdata = {
			id: id,
			amount: 5
		}
		data.resShow = true
		data.statusText = "确定刷新该职位吗？"

	}

	const toeidt = (id) => {
		data.id = id
		uni.navigateTo({
			url: '/pages/pagesPersonal/job/jobEdit/jobEdit?id=' + id,

		})

	}

	const toclose = (id) => {
		data.id = id
		data.closeShow = true

		if (data.swiperCurrent == 2) {
			data.closeText = "确定开启该职位吗？"
		} else {
			data.closeText = "确定关闭该职位吗？"
		}
	}

	const todele = (id) => {
		data.id = id
		data.deleShow = true
	}
	const deleJob = async () => {
		
		let params = {
			id: data.id
		}
		let res = await uni.$u.api.delJob(params)
		if (res) {
			uni.$u.toast("删除成功")
			paging3.value.reload()
			paging.value.reload()
			paging2.value.reload()

		}
	}
	const closeJob = async () => {
		if (data.swiperCurrent == 2) {
			let params = {
				id: data.id,
				is_display: 1
			}
			let res = await uni.$u.api.jobsetDisplay(params)
			if (res) {
				uni.$u.toast("开启成功")
				paging3.value.reload()
				paging.value.reload()
				paging2.value.reload()

			}
		} else {
			let params = {
				id: data.id,
				is_display: 0
			}
			let res = await uni.$u.api.jobsetDisplay(params)
			if (res) {
				uni.$u.toast("关闭成功")
				if (data.swiperCurrent == 0) {
					paging.value.reload()
					paging3.value.reload()
				} else {
					paging2.value.reload()
					paging3.value.reload()
				}

			}
		}
	}

	const refreshJob = async () => {
		console.log(123)
		let params = {
			id: data.id
		}
		let res = await uni.$u.api.refreshJob(params)
		if (res) {
			data.done = res.done;
			if (res.done == 1) {
				uni.$u.toast("刷新成功")
			} else {
				data.resShow2 = true
			}
		}

	}

	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		data.height = (uni.$u.sys().windowHeight - res.height - 75) + 'px';
	}

	// 立即支付
	const paySubmit = async (value) => {
		let params = {
			jobid: data.itemdata.id,
			service_type: 'single_job_refresh',
			payment: value == 1 ? 'wxpay' : 'alipay'
		}
		let orderInfo = await uni.$u.api.company_pay_direct_service(params)
		// #ifndef H5
		// 拉起收银台
		uni.requestPayment({
			provider: params.payment,
			orderInfo: orderInfo.parameter, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
			success(res) {
				uni.$u.toast('支付成功')
				setTimeout(()=>{
					uni.$u.toast('刷新成功')
				},2000)
				data.isCashier = false
			},
			fail(err) {
				uni.$u.toast('您已取消支付')
			}
		});
		// #endif
		// #ifdef H5
		uni.$u.toast('暂不支持')
		// #endif
	}
	onReady(() => {
		getListHeight()
	})
	onShow(() => {
		if (paging.value) {
			paging3.value.reload()
			paging.value.reload()
			paging2.value.reload()
		}

	})
</script>

<style lang="scss" scoped>
	page,
	body {
		background-color: #F8F8F8;
		width: 100vw;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #F8F8F8;

		.bigNav {
			.one {
				.newsList {
					padding: 30rpx 30rpx 0 30rpx;
					width: 100%;
					background-color: #fff;
					margin-bottom: 10rpx;
					.jobtop {
						// margin-bottom: 20rpx;
						.topjob {
							display: flex;
							justify-content: space-between;
							color: #000;
							font-weight: bold;
							font-size: 32rpx;
							// margin: 20rpx 0;

							text:nth-child(2) {
								font-size: 28rpx;
								color: red;
								font-weight: 500;
							}
						}

						.bottomjob {
							margin: 20rpx 0;
							text {
								margin: 0 3rpx;
								font-size: 28rpx;
								color: #867f7f;
							}
						}
						.newspage{
							display: flex;
							margin-bottom: 20rpx;
							margin-top: 40rpx;
							.button{
								padding: 8rpx 20rpx;
								margin: 0 10rpx;
								color: red;
								font-size: 24rpx;
								border-radius: 5rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color:#f2f2f2;
							}
							.button2{
								color: #00D075;
							}
						}

					}

					.jobBottom {
						border-top: 2rpx solid #e5e5e5;
						height: 96rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.button {
							width: 112rpx;
							height: 52rpx;
							margin: 0 10rpx;
							color: #929292;
							font-size: 24rpx;
							border:2rpx solid #dcdcdc;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color:#f2f2f2;
						}
					}
				}
			}
		}
	}

	.payBox {
		width: 100%;
		height: 500rpx;
		background: #fff;
		padding: 30rpx;
	}
</style>